<template>
<section>
  <div class="ad1 tc" v-if="show">
    <div class="adinner relative">
      <img :src="twh" />
      <i @click="handleShow" class="el-icon-error absolute iconbtn light-gray Dim shadow-1 pointer"></i>
    </div>
  </div>
  <div class="tc pv4">
  <img @click="openAccountSet" :src="user.avatar" class="pointer br-100 pa1 ba b--black-10 h3 w3" alt="avatar">
  <h1 class="f5 f4-ns fw6 mid-gray">{{user.nickname}}</h1>
  <h2 class="f6 gray fw2 ttu tracked">{{user.email}}</h2>
  <h2 class="f6 gray fw2 ttu tracked">{{user.camera}}</h2>
  <h2 class="f6 gray fw2 ttu tracked">{{user.intro}}</h2>
</div>
  <article-list />
    <account-set-dailog ref="account" />
</section>
</template>

<script>
import AccountSetDailog from '@/components/AccountSet';
import { mapState } from 'vuex';
import ArticleList from './ArticleList';
import twh from './img/lanyueheng.jpg';

export default {
  name: 'HomeWrap',
  data() {
    return {
      twh,
      show: true,
    };
  },
  methods: {
    openAccountSet() {
      this.$refs.account.show();
    },
    handleShow() {
      this.show = false;
    },
  },
  components: {
    ArticleList,
    AccountSetDailog,
  },
  computed: {
    ...mapState({
      user: state => state.user.info,
    }),
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="sass" scoped>
@import "./style.scss";
</style>

